
<!DOCTYPE html>
<html>
<head>
  <title>地图导航定位</title>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
</head>

<body>
  <!-- 地图容器 -->
  <div id="container"></div>
</body>
<style rel="stylesheet" type="text/css">
  body{
    margin: 0;
    padding: 0;
  }
  #container {
    height: 100vh;
    width: 100%;
  }
</style>
<script type="text/javascript">
  //将密钥设置到全局变量中
  //在当前window对象中，追加指定名称的属性
  window._AMapSecurityConfig = {
    securityJsCode: "e8a26a21d3c0bba31baaf78023cc0cfb",
  };
</script>
<!--<script src="https://webapi.amap.com/loader.js"></script>-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=4c69b09aa1b2a765ca3c2e42baddf716"></script>
<script type="text/javascript">
    // 创建地图实例
    var map = new AMap.Map("container", {
      zoom: 18,
      center: [116.39, 39.92]
    });
    var longitude = 116.39;
    var latitude = 39.92;
    // 当页面加载完成后
    window.onload = function() {
      //调用鸿蒙
      window.swift.setCurrentLocation()
    };
    //设置定位
    function setLocation(lon,lat){
      //重新设置地图中心点
      map.setZoomAndCenter(20, [lon,lat]);
      //更新当前中心点
      longitude = lon;
      latitude = lat;
      //设置当前中心点的标记
      var marker = new AMap.Marker({
        map,
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        position: [lon,lat]
      });
      //加入到地图
      map.add(marker);
    }
    //搜索地址
    function searchPlace(address){
      //创建搜索对象，提供搜索设置
      //为地图新增插件：搜索
      map.plugin(['AMap.PlaceSearch'], function() {
        //创建搜索对象，提供搜索设置
        var MSearch = new AMap.PlaceSearch({
          map,
          pageSize: 10,
          pageIndex: 1,
          extensions: 'base'
        });
        //为地图设置监听：搜索完成时
        AMap.Event.addListener(MSearch, 'complete', (res)=>{
          //调用鸿蒙方法，传回搜索结果
          //通讯传递，只能传string
          window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois));
        })
        //执行搜索：自动标记
        MSearch.searchNearBy(address, [longitude,latitude])
      });
    }
</script>

</html>